<template>
<div class="mian">
  <!-- 头部导航栏 -->
  <head-component :noBack="false"  title="问题反馈"/>

    <div class="yj_con f32 col_333">
      <p>反馈类型</p>
      <div><select class="f32" v-model="cate"><option disabled selected value="">请选择反馈类型</option>
        <option :value="i+1" v-for="(item, i) in list" :key="i">{{item}}</option></select><img src="@/common/icon/next.png" alt=""></div>
      <p style="margin-top:0.2rem;">反馈问题</p>
      <textarea  placeholder='请输入反馈问题'  class="f32" v-model="question"></textarea>
    </div>

  <div class="global_btn" @click="tijiao">提交</div>
</div>
</template>

<script>
import headComponent from '@/components/layout/head'
export default {
    name: "complain.vue",
  data(){
    return {
      list:[],
      cate:'',
      question:''
    }
  },
  created(){
      var $this = this;
      var data = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
      $this.$axios.post('index.php?m=user&c=question_cate',data)
      .then((res) => {
        if(res.data.code == 1){
          $this.list = res.data.data;
        }
      });
  },
  methods:{
    tijiao(){
      var $this = this;
      var req = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token'),cate:$this.cate,question:$this.question}
      if(!req.cate){
        $this.$toast({
          message: '请选择问题类型',
          duration: 800
        });
        return;
      }else if(!req.question){
        $this.$toast({
          message: '请填写反馈问题',
          duration: 800
        });
        return;
      }else{
        $this.$axios.post('index.php?m=user&c=feedback', req).then( res => {
          if(res.data.code == 1){
            this.$toast({
              message: res.data.msg,
              duration: 800,
              onClose: ()=>{
                this.$router.go(-1);
              }})
          }else{
            this.$toast({
              message: res.data.msg,
              duration: 800
            });
          }
        })
      }
    }
  },
   components: {
     headComponent
   },
}
</script>

<style  scoped  lang="less">
  .layout-head{border-bottom: 0.02rem solid #f5f5f5;}
  .yj_con{width:92%;margin: 1.2rem auto 0;
    p{line-height: 1.4rem;}
    div{width: 100%;height: 1.2rem;border-radius: 0.12rem;background: #f6f6f6;padding: 0 0.26rem;overflow: hidden;
      select{color: #666;float: left;height: 100%;width: 94.7%;text-align-last: left;}
      img{float: right;height: 0.46rem;margin-top: 0.34rem;}
    }
    textarea{width: 100%;height:4rem;background: #f6f6f6;padding: 0.26rem;border-radius: 0.12rem;color: #999;}
    textarea[placeholder]{color: #666;}
  }
  .global_btn{width: 90%;margin: 1rem auto 0;}
</style>
